<template>
  <div class="browseContract-col">
    <el-row>
      <el-col>
        <h6>
          流程编号：<a href="javascript:;" class="hit">{{ processNumber }}</a>
        </h6>
        <el-tabs
          tab-position="left"
          v-model="activeName"
          @tab-click="handleTabsChange"
          :style="`height:${contentColHeight}px`"
        >
          <el-tab-pane
            v-for="(v, i) in contractList"
            :key="i"
            :name="`tab_${i}`"
          >
            <span slot="label" :title="v.name">{{ v.name }}</span>
            <div
              class="content"
              :style="`height:${contentColHeight}px`"
              v-loading="loading"
            >
              <a
                class="download"
                href="javascript:;"
                @click="fileDownload(v.name, v.path)"
                :title="v.name"
                >下载合同</a
              >
              <iframe
                :src="tabIndex == i ? contractSrc : 'about:blank'"
                height="100%"
                width="100%"
                frameborder="0"
              ></iframe>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<style lang="less" rel="stylesheet/less" scoped>
.browseContract-col {
  position: relative;
  h6 {
    line-height: 30px;
    color: #858585;
  }
  /deep/.el-tabs {
    margin-top: 5px;
    .content {
      text-align: left;
      padding: 20px;
      border: 1px solid #eee;
      box-sizing: border-box;
      overflow: hidden;
      margin-top: 5px;
      position: relative;
      .download {
        font-size: 15px;
        float: right;
        font-weight: 600;
        color: #0070c0;
        font-family: "黑体";
        cursor: pointer;
        text-decoration: none;
        margin-bottom: 5px;
      }
    }
    &.el-tabs--left {
      .el-tabs__content {
        box-sizing: border-box;
        left: 100px;
        top: 31px;
        height: auto;
        overflow: initial !important;
      }
      .el-tabs__nav-wrap.is-left::after {
        background-color: #fff;
      }
    }
    .el-tabs__item {
      width: 100px;
      height: 45px;
      line-height: 45px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border: 1px solid #eee;
      text-align: center !important;
      border-right: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &.is-active {
        background: #409eff;
        color: #fff;
      }
    }
  }
  /deep/ .el-tabs__active-bar {
    height: 0 !important;
  }
  a.hit {
    color: #409eff;
  }
}
</style>
<script>
import { download } from "@/util/fileDownload.js";
import { showAlert } from "lesso-common/public/utils";
// import constant from "lesso-common/public/constant";
import constant from "@/public/constant";

/*
    account 电子签账号 必传,
    applyId 申请ID 必传
    contentColHeight 合同容器的高度
*/
export default {
  props: {
    account: {
      type: String,
      required: true,
    },
    applyId: {
      type: String,
      required: true,
    },
    contentColHeight: {
      type: Number,
      default: 800,
    },
  },
  data() {
    return {
      env: "dev", //系统当前运行环境,默认开发
      loading: true,
      activeName: "tab_0",
      token: "",
      processNumber: "",
      contractList: [],
      contractPath: "",
      tabIndex: 0,
      contractSrc: "",
    };
  },
  created() {
    this.env = constant.appenv; //对应的是运行环境（开发，测试，正式）
    this.loadContract();
  },
  methods: {
    async loadContract() {
      this.loading = true;
      let that = this;
      await that.$http
        .createToken({
          account: that.account,
          applyId: that.applyId,
        })
        .then(({ data }) => {
          if (data.code == 200) {
            that.token = data.rows.token;
            if (data.rows.contractList) {
              that.contractList = data.rows.contractList;
              let checkTabData = data.rows.contractList[that.tabIndex];
              that.processNumber = checkTabData["itemNo"];
              if (that.env == "app") {
                that.contractSrc = `https://esign.lesso.com/esign/SSOSign/SignLogin?param=${that.token}&url=https://esign.lesso.com/Esign/Sign/Index?doc_id=${checkTabData.docId}`;
              } else {
                that.contractSrc = `https://esign.lesso.com/testesign/SSOSign/SignLogin?param=${that.token}&url=https://esign.lesso.com/TestEsign/Sign/Index?doc_id=${checkTabData.docId}`;
              }
            }
          }
          setTimeout(function() {
            that.loading = false;
          }, 600);
        })
        .catch((error) => {
          this.$alert("查询文件失败，请检查网络！", {
            confirmButtonText: "确定",
            customClass: "alertFailure",
          });
        });
    },
    handleTabsChange(tab, event) {
      this.contractSrc = "about:blank";
      this.loadContract();
      this.tabIndex = tab.index;
      this.activeName = tab.name;
    },
    fileDownload(filename, url) {
      this.$http
        .getFullFilePath({
          url: url,
        })
        .then(({ data }) => {
          if (data.code == 200) {
            download(`${filename}.pdf`, data.rows[0].fileName);
          } else {
            showAlert({
              msg: `${data.info}`,
              type: 0,
            });
          }
        })
        .catch((error) => {
          showAlert({
            msg: `下载文件失败，请检查网络！`,
            type: 0,
          });
        });
    },
  },
};
</script>
